Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

5o. módulo
Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br

AULA 02 - INTRODUÇÃO AOS CONCEITOS DE HTML, CSS, JS

Agenda

1. Apresentação HTML

1.2. Navegador Mosaic

Figura: Navegador Mosaic 1990

Fonte: Parece pouco intuitivo, mas, na época, era revolucionário (Divulgação: NCSA)

Observação: Acesse Archive.org para navegar pela internet nas páginas estáticas armazenadas desde sua criação.

Para consultar a evolução dos navegadores e tecnologias entre 1990 e 2012, bem como o crescimento de tráfego global da internet, consulte o Gráfico.

1.3. W3C - World Wide Web Consortium

1.4. WHAT Working Group

1.5. O que é um domínio, como registrar

2. Apresentação CSS

3. Apresentação Javascript (JS)

3.1. ECMA - EUROPEAN COMPUTER MANUFACTURES ASSOCIATION

4.1. Tutoriais

4.2. Acessibilidade

4.3. Internacionalização ou I18n

4.4. Guias e Tutoriais

4.5. Fontes e Ícones

4.6. Principais Frameworks CSS

4.7. Pré-Processadores

4.8. Diversos

5. Ferramentas de Desenvolvimento

6. Editores de Textos

7. Estrutura Semântica do HTML5

Tag Tipo Descrição
< b > estilo Formata o texto em negrito.
< i > estilo Formata o texto em itálico.
< em > semântico Efatiza o texto, colocando o texto em itálico.
< strong > semântico Dá uma importância ao texto, colocando o texto em negrito.

7.1. HTML Semântico

7.2. Significado das tags Semânticas

< header >

< nav >

< section >

< article >

< aside >

Exemplos de layout

Figura: Exemplo1 de layout com as disposições das tags HTML semânticas

Fonte: Autoria própria

Figura: Exemplo2 de layout com as disposições das tags HTML semânticas

Fonte: Autoria própria

7.3. Tags Iniciais do HTML

Tamanho default da Fonte

7.3.1. DOCTYPE

Exemplo HTML 4.01 Strict (Não se utiliza mais)

<!-- HTML 4.01 Strict --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo HTML 4.01 Transitional (Não se utiliza mais)

<!-- HTML 4.01 Transitional --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo HTML 4.01 Frameset (Não se utiliza mais)

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo HTML5 e para as futuras versões (É utilizado atualmente)

<!-- HTML5 em diante -->
<!DOCTYPE html> 
<html> <!-- Inicio do HTML -->
    <head> <!-- Início do Cabeçalho da Página -->
        <meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
        <title> Título da Página </title> <!-- Definição do Título da Página -->
    </head>
    <body> <!-- Início do Corpo do Documento -->
        ... inserir seu conteúdo aqui ...
    </body> <!-- Fim do Corpo do Documento -->
</html> <!-- Fim do HTML -->

7.3.2. Tag < meta >

7.3.3. Tag < title >

7.3.4. Favicon

7.3.5. Tags de Títulos

Medida em:
Tag		 px em
h1 32px 2em
h2 24px 1.5em
h3 20.8px 1.3em
h4 16px 1em
h5 12.8px 0.8em
h6 11.2px 0.7em 
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> Título h1: Seção I </h1>
        <h2> Título h2: Capítulo I </h2>
        <h3> Título h3: Título I </h3>
        <h4> Título h4: Subtítulo I </h4>
        <h5> Título h5: Subtítulo II </h5>
        <h6> Título h6: Subtítulo III </h6>
    </body>
</html>

Saída:

7.3.6. Tags de Conteúdos de Linhas

Tag < p >: Parágrafo

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
        <p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
        <p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
    </body>
</html>

Saída:

Tag < div >: Divisão

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <div> <strong>Divisão 1</strong>
            <h1> IFSP - Bragança Paulista  </h1>
            <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
            <div> <strong>Divisão 2 - Dentro da Divisão 1</strong>
                <p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
                <p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
            </div>
          </div>
    </body>
</html>

Saída:

Tag < strong >: Negrito

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong> e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Saída:

Tag < em >: Enfatizar

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Saída:

Tag < sup >: Superior a base

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> Na matemática, ao efetuarmos o cálculo de um número elevado a outro, representamos este cálculo assim: 10<sup>3</sup>, o que significa que estou elevando o número 10 a 3, sendo a mesma coisa que 10 x 10 x 10. </p>
    </body>
</html>

Saída:

Tag < sub >: Inferior a base

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> Na química, o símbolo da água é: H<sub>2</sub>O. </p>
    </body>
</html>

Saída:

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> <a href="https://bra.ifsp.edu.br">IFSP-BRA</a></p>
        <p> <a href="mailto:paulagiancoli@ifsp.edu.br">E-mail Profa.</a></p>
        <p> <a href="tel:+551133956789">Ligar para</a></p>
    </body>
</html>

Saída:

Tag < img >: Imagens

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE."></p>
    </body>
</html>

Saída:

Ou: quando não localiza a imagem, exibe o conteúdo do atributo alt.

Tag < figure >: Figuras

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <p>
            <h1> IFSP - Bragança Paulista  </h1>
            <figure>
              <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE.">
              <figcaption>Fig.1 - Logo da Disciplina DWE.</figcaption>
            </figure>
        </p>
    </body>
</html>

Saída:

Tag < del >: Riscar

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, <del>com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em></del> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Saída:

Observação:

8. Inserindo o arquivo CSS ao HTML

<!-- Exemplo 1: Inserindo o arquivo de estilo CSS no próprio HTML -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
        <style> 
            ... Inserir seu código CSS aqui ...
        </style>
    </head>
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

<!-- Exemplo 2: Inserindo o arquivo de estilo CSS como externo ao HTML -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
        <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">
    </head>
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

9. Conceitos Básicos do CSS

9.1 Seletores

Formato Tipo de Seletor Aplicado em
a HTML Todas as tags especificadas no HTML.
.minhaClasse Classe Qualquer tag HTML que tenha a Classe especificada.
a.minhaClasse Dependência de Classe Tag HTML especificada que tenha a Classe especificada.
#meuID Identificadores Qualquer tag HTML que tenha o ID especificado.
a#meuID Dependência de Identificadores Tag HTML especificada que tenha o ID especificado.
* Universal Todas as tags HTML. 
/* Exemplo de Arquivo CSS (estilo.css) */
/* Seletores de HTML */
p { 
    color: #ff1493;
}
a {
    background-color: #ff1493;
}

/* Seletores de Classes */
.rodape {
    color: #ff1943;
}
p.rodape {
    color: #ff1943;
}
.cabecalho {
    background-color: blue;
}

/* Seletores de Identificadores */
#texto {
    color: #ff1943;
}
#imagem {
    color: #ff1943;
    background-color: blue;
}
p#texto {
    color: #ff1943;
    background-color: black;
}

9.2. Propriedade CSS customizada

/* Exemplo conteúdo de parte de um arquivo.css */

--cor-perigo: red;
--bordacolorida: 2px solid blue;
--margem-definida: 2.5em;
--maiusculo: uppercase;

/* Exemplo conteúdo de parte de um arquivo.css */

div {
  border: var( bordacolorida );
  margin: var( --margem-definida );
  text-transform: var( --maiusculo );
}
Escopo de variáveis CSS
/* Contexto para a página toda */
:root {

--cor-perigo: red;
--bordacolorida: 2px solid blue;
--margem-definida: 2.5em;
--maiusculo: uppercase;

}

/* Contexto em uma determinada parte */
footer {    
 --minha-cor-fundo: black;
 --minha-cor: red;
 --minha-largura: 40%;
}
Valor default de uma variável CSS
seletor {   
 background-color: var( --cor, black );
}

/* Declaração da variável no escopo do componente */ 
 .component {
  --cor-texto: green;
  /* Notar que --cor-header não foi declarada */
}

/* Regras de estilo */
 .component .header {
  color: var(--cor-header, blue); 
  /* estiliza na cor blue, pois --cor-header não foi declarada */
}
 .component .text {
  color: var(--cor-texto, black); 
  /* estiliza na cor green, pois --cor-texto foi declarada */
}
Observação

10. Propriedade de CSS: Formatação de Cores dos textos

Declaração:

seletor { 
    propriedade: valor;  
}

Exemplo da Propriedade Color:

h1 { 
    color: blue;  
}

11. Search Engine Optimization (SEO)

13. Anexos: Roadmap, Propriedades CSS3 e Tags HTML5

13.1. Roadmap Front-End

13.2. Lista Propriedades CSS3

13.3. Lista Tags HTML5

14. Links interessantes para ler nas horas de folga

15. Sugestão de passos a seguir para se tornar um Desenvolvedor Front-End

Referências

Perguntas

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.

</div> </div>